<template>
  <div>
      <h1>详情页</h1>
  <div class="goods-sku">
    <dl v-for="item in specs" :key="item.id">
      <dt>{{item.name}}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <img :class="{selected:val.selected,disabled:val.disabled}" @click="clickSpecs(item,val)" v-if="val.picture" :src="val.picture" :title="val.name">
          <span :class="{selected:val.selected,disabled:val.disabled}" @click="clickSpecs(item,val)" v-else>{{val.name}}</span>
        </template>
      </dd>
    </dl>
  </div>
  </div>
</template>
<script>
import { getDetail } from '../../api/details'
import getPowerSet from '../../utils/pow-set'
export default {
  name: 'detail',
  data () {
    return {
      specs: [],
      skus: [],
      pathMap: {},
      skuId: ''
    }
  },
  beforeMount () {
    console.log(1111)
    getDetail().then(res => {
      console.log(res)
      this.specs = res.result.specs
      this.skus = res.result.skus
      this.getPathMap(res.result.skus)
      this.skuId = res.result.id
      // this.initSelectedStatus(this.skuId)
      // this.updateDisabledStatus(this.specs, this.pathMap)
    })
  },
  methods: {
    initSelectedStatus (skuId) {
      // 根据 skuId 查询到 sku 对象
      const skuObj = this.skus.find(item => item.id === skuId)
      if (skuObj) {
        // 遍历商品规格数组，获取规格和下标
        this.specs.forEach((spec, index) => {
          // 从 sku 对象中，根据下标获取到规格名
          const name = skuObj.specs[index].valueName
          // 更新页面的规格选中状态
          spec.values.forEach(val => { val.selected = val.name === name })
        })
      }
    },
    updateDisabledStatus () {
      const star = '*'
      console.log(this.specs)
      this.specs.forEach((spec, index) => {
        // 先获取当前选中的规格集合
        const curr = this.getSelectedArr(this.specs)
        // 🔔 根据当前选中集合，模拟用户的下一次选中
        spec.values.forEach(val => {
          // 已经选中的，不用模拟
          if (val.selected) return
          // 模拟其他未选中的值，注意下标顺序要对应起来
          curr[index] = val.name
          console.log(curr)
          // 过滤无效值，并最终得到key
          const key = curr.filter(v => v).join(star)
          // 根据 key 在字典从查找，最终设置禁用状态
          console.log(key)
          console.log(this.pathMap)
          console.log(val)
          val.disabled = !this.pathMap[key]
        })
        console.log(this.specs)
      })
    },
    getSelectedArr (specs) { // 获取当前选中的数组
      const arr = []
      specs.forEach(spec => {
        const obj = spec.values.find(val => val.selected)
        arr.push(obj ? obj.name : undefined)
      })
      console.log(arr)
      return arr
    },
    getPathMap (skus) {
      const star = '*'
      skus.forEach(sku => {
        // 1. 过滤出有库存有效的sku
        if (sku.inventory) {
          // 2. 得到sku属性值数组
          const specs = sku.specs.map(spec => spec.valueName)
          // console.log(specs)
          // 3. 得到sku属性值数组的子集
          const powerSet = getPowerSet(specs)
          // console.log(powerSet)
          // 4. 设置给路径字典对象
          powerSet.forEach(set => {
            const key = set.join(star)
            // 没有key设置一个数组，用于存放 skuid
            console.log(key)
            if (!this.pathMap[key]) {
              this.pathMap[key] = []
            }
            // 往数组追加 skuid
            this.pathMap[key].push(sku.id)
            console.log(this.pathMap)
          })
        }
      })
    },
    clickSpecs (item, val) {
      // const star = '*'
      // 1. 取消选中
      if (val.disabled) return
      if (val.selected) {
        val.selected = false
      } else {
      // 2. 排他选中
        item.values.forEach(bv => { bv.selected = false })
        val.selected = true
        // const currSpec = this.getSelectedArr(this.specs)
        // if (!currSpec.includes(undefined)) {
        //   const key = currSpec.join(star)
        //   // 根据选中的规格查找到 skuId
        //   const skuIds = this.pathMap[key]
        //   console.log(skuIds)
        //   // 根据 skuId 查找到商品信息
        //   console.log(this.skus)
        //   const sku = this.skus.find(sku => sku.id === skuIds[0])
        //   console.log(sku)
        // }

        this.updateDisabledStatus()
      }
    }
  }
}
</script>
<style lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
